<template>
	<view class="admin" :style="{ paddingTop: safeAreaTop + 'px' }">
		<view class="admin-avatar flex-r s-b a-c">
			<view class="flex-r s-b a-c">
				<up-avatar size="50" text="刘" fontSize="24" randomBgColor></up-avatar>
				<text class="ml-1">用户名</text>
			</view>
			<text class="iconfont icon-shezhi" />
		</view>
		<view class="vipCard mt-2">
			<view></view>
		</view>
		<view class="mine flex-r s-b a-c">
			<template v-for="item in mineList1" :key="item.title">
				<view class="flex-c a-c j-c">
					<text class="iconfont-color">{{item.icon}}</text>
					<text>{{item.title}}</text>
				</view>
			</template>
		</view>
		<view class="p-1">
			<view class="mine2 flex-r s-b a-c">
				<template v-for="item in mineList2" :key="item.icon">
					<view class="flex-c a-c j-c">
						<view class="icon-bg flex-r a-c j-c">
							<text class="iconfont">{{item.icon}}</text>
						</view>
						<text>{{item.title}}</text>
					</view>
				</template>
			</view>
			<view class="settings flex-r s-b a-c mt-1">
				<view class="flex-r a-c">
					<text class="iconfont icon-shouhuodizhi" />
					<text>收货地址</text>
				</view>
				<text class="iconfont icon-zuozuo" />
			</view>
			<view class="settings flex-r s-b a-c mt-1">
				<view class="flex-r a-c">
					<text class="iconfont iconfont2 icon-gerenxinxi" />
					<text>个人信息</text>
				</view>
				<text class="iconfont icon-zuozuo" />
			</view>
			<view class="settings flex-r s-b a-c">
				<view class="flex-r a-c">
					<text class="iconfont icon-zhanghaoyuanquan" />
					<text>账号与安全</text>
				</view>
				<text class="iconfont icon-zuozuo" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	const mineList1 = reactive([{
			title: '我的测试',
			icon: '\ue762'
		},
		{
			title: '我的报告',
			icon: '\ue762'
		},
		{
			title: '我的卡券',
			icon: '\ue762'
		},
		{
			title: '我的余额',
			icon: '\ue762'
		}
	])
	const mineList2 = reactive([{
			title: '档案库',
			icon: '\ue741'
		},
		{
			title: '我的订单',
			icon: '\ue75c'
		},
		{
			title: '我的课程',
			icon: '\ue764'
		},
		{
			title: '分享推广',
			icon: '\ue744'
		}
	])
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.admin {
		// padding: 20rpx;

		.admin-avatar {
			margin-top: 20rpx;
			font-size: 16rpx;
			padding: 0 60rpx;

			view text {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}

			.iconfont {
				font-size: 40rpx;
			}
		}

		.vipCard {
			padding: 0 20rpx;

			view {
				width: 100%;
				height: 160rpx;
				background-color: #1D1B15;
				border-radius: 8rpx 8rpx 0 0;
			}
		}

		.mine {
			background-color: #fff;
			padding: 34rpx 70rpx 50rpx;

			view {
				.iconfont-color {
					font-size: 60rpx;
				}

				text {
					font-size: 24rpx;
					color: #393939;
					margin-top: 20rpx;
				}
			}
		}

		.mine2 {
			background-color: #fff;
			box-shadow: 0px 0px 1px 0px #BDBDBD;
			border-radius: 8rpx;
			padding: 52rpx 50rpx 48rpx;

			>view {
				.icon-bg {
					width: 80rpx;
					height: 80rpx;
					background: linear-gradient(180deg, #F0F0F0 0%, #FFFFFF 100%);
					border-radius: 4px;
				}

				.iconfont {
					font-size: 40rpx;
				}

				text {
					font-size: 24rpx;
					color: #161616;
					margin-top: 10rpx;
				}
			}
		}

		.settings {
			background-color: #fff;
			box-shadow: 0px 0px 1px 0px #BDBDBD;
			border-radius: 8rpx;
			padding: 36rpx 40rpx;

			view {
				font-size: 28rpx;
				color: #2B303D;

				.iconfont {
					font-size: 36rpx;
					margin-right: 16rpx;
				}

				.iconfont2 {
					font-size: 32rpx;
				}
			}

			.iconfont {
				font-size: 24rpx;
			}
		}
	}
</style>